<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
          let oUser = document.getElementById('user');
          let oPwd = document.getElementById('pwd');
          let oBtn = document.getElementById('btn')

          oBtn.onclick=function(){
            let data = new FormData();

            data.set('user',oUser.value);
            data.set('pwd',oPwd.value);

            let oAjax = new XMLHttpRequest();

            //get
            let arr = [];
            data.forEach((value,key)=>{
              arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
              //console.log(a,b);
            });

            oAjax.open('GET',`http://localhost:8080/api?${arr.join('&')}`, true);
            oAjax.send();


            /*
            //post
            oAjax.open('POST',`http://localhost:8080/api`, true);
            oAjax.setRequestHeader('Content-Type','application/x-form-urlencode');
            oAjax.send(data);
  */

            oAjax.onreadystatechange=function(){
              if(oAjax.readyState==4){
                if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                  alert('success');
                }else {
                  alert('fail');
                }
              }
            };

          };
        };
    </script>
  </head>
  <body>
      <input type="text" id="user" value=""><br>
      <input type="password" id="pwd" value=""><br>
      <input type="button" id="btn" value="submit">
  </body>
</html>
